<template>
<div class="home-entry">
  <div class="container">
     <!-- 首页的入口(分类和广告区) -->
      <!-- 左侧分类 -->
      <HomeCategory/>
      <!-- 轮播图 -->
      <HomeBanner/>
    </div>
   <!-- 新鲜好物 -->
    <HomeNew />
    <!-- 人气推荐 -->
    <HomeHot />
    <!-- 热门品牌 -->
    <HomeBrand />
    <!-- 生鲜 -->
  <HomeProduct />
  <!-- 最新专题 -->
  <HomeSpecial />
  </div>

</template>

<script>
import HomeCategory from './components/home-category.vue'
import HomeBanner from './components/home-banner.vue'
import HomeNew from './components/home-new.vue'
import HomeHot from './components/home-hot.vue'
import HomeBrand from './components/home-brand.vue'
import HomeProduct from './components/home-product.vue'
import HomeSpecial from './components/home-special.vue'
export default {
  name: 'Home',
  components: {
    HomeCategory,
    HomeBanner,
    HomeNew,
    HomeHot,
    HomeBrand,
    HomeProduct,
    HomeSpecial
  }
}
</script>

<style scoped lang="less">
.container {
    .hoverShadow()
}
// 使用Transition组件实现动画,一个元素或者组件的(显示,隐藏，创建，移除)
// 进入前  v-enter  (v-enter-from)
// 进入中 v-enter-active
// 进入后 v-enter-to
//

// 需求，一个盒子在显示隐藏的时候做淡入淡出动画
// 1.准备盒子
// 2.控制显示隐藏
// 3.s=加动画

</style>
